<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Recreation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Configuration ---
    const cx = 230;
    const cy = 200;
    const R = 130;
    const r0 = 65;
    const lineWidth = 2;
    const mainFont = "italic 24px 'Times New Roman'";
    const subFont = "italic 16px 'Times New Roman'";
    const captionFont = "24px 'SimSun', 'Songti SC', serif"; // Common Chinese fonts

    // --- Helper Function ---
    // Draws text with a subscript, e.g., U₀
    function drawTextWithSub(mainText, subText, x, y) {
        ctx.font = mainFont;
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText(mainText, x, y);

        const mainMetrics = ctx.measureText(mainText);

        ctx.font = subFont;
        ctx.fillText(subText, x + mainMetrics.width - 2, y + 6);
    }

    // --- Main Drawing Logic ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = lineWidth;

    // 1. Draw concentric circles
    // Outer circle (conductor)
    ctx.beginPath();
    ctx.arc(cx, cy, R, 0, 2 * Math.PI);
    ctx.stroke();

    // Inner circle (conductor)
    ctx.beginPath();
    ctx.arc(cx, cy, r0, 0, 2 * Math.PI);
    ctx.stroke();

    // 2. Draw dashed radius lines
    ctx.save();
    ctx.setLineDash([5, 5]);

    // Radius R line
    const angleR = 220 * Math.PI / 180; // ~7:30 o'clock position
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(cx + R * Math.cos(angleR), cy + R * Math.sin(angleR));
    ctx.stroke();

    // Radius r₀ line
    const angle_r0 = 335 * Math.PI / 180; // ~4:30 o'clock position
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(cx + r0 * Math.cos(angle_r0), cy + r0 * Math.sin(angle_r0));
    ctx.stroke();

    ctx.restore();

    // 3. Draw ground connection
    const groundStartX = cx + R;
    const groundStartY = cy;
    const groundWireLength = 50;
    const groundStemLength = 30;

    ctx.beginPath();
    ctx.moveTo(groundStartX, groundStartY);
    ctx.lineTo(groundStartX + groundWireLength, groundStartY);
    ctx.lineTo(groundStartX + groundWireLength, groundStartY + groundStemLength);
    ctx.stroke();

    // Ground symbol
    const groundSymbolX = groundStartX + groundWireLength;
    const groundSymbolY = groundStartY + groundStemLength;
    ctx.beginPath();
    ctx.moveTo(groundSymbolX - 20, groundSymbolY);
    ctx.lineTo(groundSymbolX + 20, groundSymbolY);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(groundSymbolX - 14, groundSymbolY + 8);
    ctx.lineTo(groundSymbolX + 14, groundSymbolY + 8);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(groundSymbolX - 8, groundSymbolY + 16);
    ctx.lineTo(groundSymbolX + 8, groundSymbolY + 16);
    ctx.stroke();

    // 4. Draw labels

    // Label U₀
    drawTextWithSub('U', '0', cx - 50, cy - 50);

    // Label r₀
    const r0LabelX = cx + r0 * Math.cos(angle_r0) + 10;
    const r0LabelY = cy + r0 * Math.sin(angle_r0) - 10;
    drawTextWithSub('r', '0', r0LabelX, r0LabelY);

    // Label R
    ctx.font = mainFont;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    const RLabelX = cx + R * 0.55 * Math.cos(angleR) - 25;
    const RLabelY = cy + R * 0.55 * Math.sin(angleR) - 10;
    ctx.fillText('R', RLabelX, RLabelY);

    // 5. Draw Caption
    ctx.font = captionFont;
    ctx.textAlign = 'center';
    ctx.fillText('电图 1.31.1', cx, cy + R + 50);

</script>
</body>
</html>